<template>
    <view>
        <view :style="{paddingTop: statusBarHeight + 'rpx'}" class="status-bar">
            <p style="color: transparent">{{ statusBarHeight }}</p>
        </view>
        <uni-row>
            <uni-col :span="7">
                <view class="search-box">
                    <view style="display: flex">
                        <!--搜索按钮-->
                        <view class="search-btn" @click="goSearch('../searchPage/searchPage')">
                            <p>
                                <uni-icons type="search" size="20"></uni-icons>
                            </p>
                        </view>
                        <!--位置信息-->
                        <view class="position">
                            <p>深圳</p>
                        </view>
                    </view>
                </view>
            </uni-col>
            <uni-col :span="10">
                <view class="title-box">
                    <view class="title">
                        <p>EShop 商城</p>
                    </view>
                </view>
            </uni-col>
            <uni-col :span="7">
                <div style="height: 55rpx;"></div>
            </uni-col>
        </uni-row>
    </view>
</template>

<script>
import UniRow from "../uni_modules/uni-row/components/uni-row/uni-row";
import UniCol from "../uni_modules/uni-row/components/uni-col/uni-col";
import disableStatusBar from "../common/disableStatusBar.js";

export default {
    name: "statusBar",
    components: {
        UniCol,
        UniRow,
    },
    data() {
        return {
            statusBarHeight: disableStatusBar,
            positionInfo: "深圳宝安区同昌路"
        }
    },
    methods: {
        goSearch(url) {
            uni.navigateTo({
                url: url,
                fail(error) {
                    console.log(error)
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.search-box {
    width: 68%;
    margin-left: 10%;
    margin-top: 5rpx;
    border-radius: 40rpx;
    background-color: white;
    overflow: hidden;
    opacity: 0.85;
    box-shadow: 0px 0px 5rpx 0px gray;
}

.search-btn {
    height: 50rpx;
}

.search-btn > p {
    height: 48rpx;
    width: 48rpx;
    border-radius: 100%;
    border: 1px solid #afafaf;
    line-height: 48rpx;
    text-align: center;
}

.position {
    height: 50rpx;
    width: 100%;
}

.position > p {
    line-height: 50rpx;
    text-align: center;
}

.title-box {
    height: 55rpx;
}

.title > p {
    text-align: center;
    line-height: 55rpx;
}
</style>